{% extends '../common/base.html' %} {% block body %}

<div class="user-login">


    <el-row :gutter="20">
        <el-col :span="6">
            <div class="alert alert-success">

                {% if user %}
                <p>欢迎您：{{ '前端仔' if user.user_type==0 else '后端仔'}}--{{user.user_account}}</p>

                <p>
                    <el-button type="success" size="mini" @click="logout">退出登录</el-button>
                </p>
                {% else %}
                <el-form :model="formLogin" :rules="rulesLogin" ref="formLogin">
                    <el-form-item label="" prop="userAccount">
                        <el-input v-model="formLogin.userAccount" placeholder="请输入账户"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="userPassword">
                        <el-input type="password" v-model="formLogin.userPassword" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="">
                            <el-input placeholder="请输入验证码" v-model="formLogin.codeValidate">
                                <template slot="append">33323</template>
                            </el-input>
                        </el-form-item> -->
                    <el-form-item label="">
                        <el-button type="success" @click="loginSubmit('formLogin')">登录</el-button>
                        <el-button @click="register">注册</el-button>
                    </el-form-item>
                </el-form>


                {% endif %}
            </div>

            <div class="alert alert-info" role="alert">
                文档简介
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <p>1、简洁的界面，无需多余操作</p>
                    <p>2、动态添加各种参数，让接口活动起来</p>
                    <p>3、团队协助友好，前端人员和后端人员相互分离</p>
                    <p>4、第三方接口授权登陆，直接返回相应数据</p>
                </div>
            </div>

        </el-col>
        <el-col :span="18">
            <div class="alert alert-info" role="alert">
                文档信息
            </div>
            <div class="panel panel-default">
                <div class="panel-body">
                    <ul style="padding:0;">
                        {% for list in lists %}
                        <li class="flex-between-center mt10">
                            <a href="javascript:;" @click="enterInfo('{{user.user_type}}','{{list.system_id}}')" style="flex:1;">{{loop.index}}、<strong style="color:rgb(0, 68, 255);">{{list.user_account}}</strong>&nbsp;&nbsp;创建了&nbsp;&nbsp;<strong style="color:rgb(86, 185, 243);">{{list.system_name}}</strong>&nbsp;&nbsp;项目</a>
                            <span>{{list.system_time}}</span>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </el-col>

    </el-row>






</div>

<el-dialog title="注册" :visible.sync="dialogTableVisible" width="30%">
    <el-form :model="formRegister" :rules="rules" ref="formRegister" label-width="80px">
        <el-form-item label="用户账户" prop="userAccount">
            <el-input v-model="formRegister.userAccount" placeholder="请输入账户"></el-input>
        </el-form-item>
        <el-form-item label="开发类型" prop="userType">
            <el-select v-model="formRegister.userType" placeholder="请选择活动区域">
                <el-option label="前端人员" value="0"></el-option>
                <el-option label="后端人员" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="用户密码" prop="userPassword">
            <el-input type="password" v-model="formRegister.userPassword" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="userRPassword">
            <el-input type="password" v-model="formRegister.userRPassword" placeholder="请确认密码"></el-input>
        </el-form-item>
        <!-- <el-form-item label=""  prop="codeValidate">
            <el-input placeholder="请输入验证码" v-model="formRegister.codeValidate">
                <template slot="append">33323</template>
            </el-input>
        </el-form-item> -->
        <el-form-item label="">

            <el-button type="success" @click="registerSubmit('formRegister')">立即注册</el-button>
        </el-form-item>
    </el-form>
</el-dialog>

{% endblock %} {% block script %}


<script>
    new Vue({
        delimiters: ['${', '}'],
        el: '#container',
        data() {

            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.formRegister.userRPassword !== '') {
                        this.$refs.formRegister.validateField('userRPassword');
                    }
                    callback();
                }
            };
            var validateRPass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formRegister.userPassword) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                dialogTableVisible: false,
                formLogin: {
                    userAccount: '',
                    userPassword: '',
                    codeValidate: ''
                },
                formRegister: {
                    userAccount: '',
                    userPassword: '',
                    userRPassword: '',
                    userType: '0',
                    codeValidate: ''
                },
                rulesLogin: {
                    userAccount: [{
                        required: true,
                        message: '请输入账户',
                        trigger: 'blur'
                    }],
                    userPassword: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                },

                rules: {
                    userAccount: [{
                        required: true,
                        message: '请输入账户',
                        trigger: 'blur'
                    }],
                    userPassword: [{
                        required: true,
                        validator: validatePass,
                        trigger: 'blur'
                    }],
                    userRPassword: [{
                        required: true,
                        validator: validateRPass,
                        trigger: 'blur'
                    }]
                }

            }
        },
        methods: {
            register() {
                this.dialogTableVisible = true;
            },
            enterInfo(type, s_id) {
                if (type) {
                    if (type == 1) {
                        location.href = `/admin/api?system_id=${s_id}`
                    } else if (type == 0) {
                        location.href = `/index/showApi?system_id=${s_id}`
                    } else {
                        console.log('error')
                    }
                } else {
                    this.$notify({
                        title: '登陆提示',
                        message: '您还没有登陆，不能进行查看',
                        type: 'error',

                    });
                }



            },
            loginSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post('/login', {
                            account: this.formLogin.userAccount,
                            password: this.formLogin.userPassword,
                        }).then(res => {
                            if (res.success) {
                                this.$notify({
                                    title: '登录失败',
                                    message: res.msg,
                                    type: 'success',
                                    position: 'top-left'
                                });
                                location.reload()
                            } else {
                                this.$notify({
                                    title: '登录失败',
                                    message: res.msg,
                                    type: 'error',
                                    position: 'top-left'
                                });
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })

            },
            registerSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post('/register', {
                            account: this.formRegister.userAccount,
                            password: this.formRegister.userPassword,
                            type: this.formRegister.userType,
                        }).then(res => {
                            if (res.success) {
                                this.dialogTableVisible = false;
                                this.$refs[formName].resetFields();
                                this.$notify({
                                    title: '注册成功',
                                    message: '注册成功，请进行登录操作',
                                    type: 'success',
                                    position: 'top-left'
                                });
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });


            },
            logout() {
                $.post('/loginout').then(res => {
                    if (res.success) {
                        location.reload()
                    }
                })
            }
        }
    })
</script>

{% endblock %}